<html>
<head>
    <meta charset="utf-8"/>
    <title>监控告警</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("body").prepend(new Date());
            setInterval(popEvent, 5000);
        });
        var logLine = 0;
        function popEvent(){
            $.ajax({
                type: 'GET',
                url: 'http://localhost:9090/pop',
                success: function (event) {
                    if(!event.audio){
                        return;
                    }
                    if(logLine > 9999){
                        // 防止页面上日志太多，定时清理
                        $("#log").html("");
                        logLine = 0;
                    }
                    logLine ++;
                    $("#log").prepend(event.date, ' ', event.audio, ' ', event.content, "</br>");
                    // wu-tong-dev-ops-bug
                    $("#myAudio").attr('src', 'https://wutong.talkweb.com.cn/mse/' + event.audio + '.mp3');
                },
            });
        }
    </script>
</head>
<body>
<div style="position: relative; top: 20px;">
    <button onclick='popEvent()'>开始</button>
    <br/>
    <audio  id="myAudio" controls autoplay></audio>
    <br/>
    <div id = "log"></div>
</div>
</body>
</html>
